<template>
  <el-popover
      placement="bottom-start"
      title="Lin"
      :width="300"
      trigger="hover"
      content="I am a full-stack developer  with more than 5 years of experience. "
  >
    <template #reference>
      <nuxt-link to="/admin">
        <el-button class="m-3">Lin XIE</el-button>
      </nuxt-link>
    </template>
  </el-popover>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.el-button + .el-button {
  margin-left: 8px;
}

.el-button {
  border: none;
  font-family: 'MS Reference Sans Serif', sans-serif;
  padding: 8px 6px;
}
.el-button:hover {
  background-color: snow;
  color: var(--scheme-black-100);
  //opacity: 0.5;
}
</style>